<template>
  <canvas id="canvas" width="300" height="300"></canvas>
  {{ diff_tl_top }} {{ top_to_bottom_height }}
</template>
<script>
import { scaleImgFit } from './element/component.js'
export default {
  data() {
    return {
      left: 0,
      top: 0,
      top_to_bottom_height: 0
    }
  },
  methods: {},
  mounted() {
    const canvas = new fabric.Canvas('canvas', {
      selection: false,
      width: 300,
      height: 300
    })
    let src = require('./element/zrender/gogopher.jpg')
    let img = scaleImgFit(src, {
      width: 300,
      height: 300
    }).then((img) => {
      let fimg = new fabric.Image(img.img, {
        scaleX: 0.2,
        scaleY: 0.2
      })
      canvas.add(fimg)
      fimg.on('modified', () => {
        console.log(fimg)
        this.left = fimg.left
        this.top = fimg.top
        let { aCoords } = fimg
        let { bl, br, tl, tr } = aCoords
        // tl 为 left,top

        let min = {
          y: aCoords['tl'].y,
          direction: 'tl'
        }
        let max = {
          y: aCoords['tl'].y,
          direftion: 'tl'
        }
        for (var p in aCoords) {
          let item = aCoords[p]
          if (item.y < min.y) {
            min.y = item.y
            min.direction = p
          }
          if (item.y > max.y) {
            max.y = item.y
            max.direction = p
          }
        }

        let diff_tl_top = aCoords['tl'].y - aCoords[min.direction].y + 100
        let top_to_bottom_height = aCoords[max.direction].y - aCoords['tl'].y
        console.log(diff_tl_top, top_to_bottom_height)

        this.diff_tl_top = diff_tl_top
        this.top_to_bottom_height = top_to_bottom_height

        fimg.set({
          top: diff_tl_top
        })
      })
    })
  }
}
</script>
